@external wp-*;

@url plusIconUrl svgPlusIcon;
@url crossIconUrl svgCrossIcon;
@url upArrowIconUrl upArrowIcon;
@url downArrowIconUrl downArrowIcon;
@url moveToParentIconUrl moveToParentIcon;
@url moveToSiblingIconUrl moveToSiblingIcon;
@url moveToChildIconUrl moveToChildIcon;
@url syncSelectionIconUrl syncSelectionIcon;
@url hierarchyIconUrl hierarchyIcon;
@url searchIconUrl searchIcon;
@url createIconUrl svgCreateIcon;
@url deleteIconUrl svgDeleteIcon;
@url createIndividualIconUrl svgCreateIndividualIcon;
@url deleteIndividualIconUrl svgDeleteIndividualIcon;
@url createPropertyIconUrl svgCreatePropertyIcon;
@url deletePropertyIconUrl svgDeletePropertyIcon;
@url refreshIconUrl svgRefreshIcon;
@url createThreadIconUrl svgCreateThread;
@url editorIconUrl svgEditorIcon;
@url changesIconUrl svgChangesIcon;
@url vizIconUrl vizIcon;
@url downloadIconUrl downloadIcon;

.wp-btn {
    border: none;
    border-radius: 2px;

    cursor: pointer;

    transition: background-color 0.15s ease-in-out;
    -moz-transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;
}

.wp-btn--page {
    height: 2.4em;
    line-height: 2.4em;
    padding: 0 20px;
    min-width: 8em;

    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.wp-btn--page-small {
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.wp-btn--page-small:hover {
    color: literal("var(--btn--hover--color)");
}



.wp-btn--input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #e0e0e0;
    color: #505050;
}

.wp-btn--input:hover {
    background-color: #d5d5d5;
}

.wp-btn--dialog {
    flex-grow: 0;
    min-width: 100px;
    height: 1.8em;
    line-height: 1.8em;
    padding: 0 20px;

    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.wp-btn--primary {
    color: #fff;
    background-color: #6c1a91;
}

.wp-btn--primary:hover {
    background-color: #501c70;
}

.wp-btn--primary:disabled {
    background-color: lightgray;
    cursor: default;
}

.wp-btn--secondary {
    color:            #fff;
    background-color: #0089bd;
}

.wp-btn--secondary:hover {
    background-color: #0073a5;
}

.wp-btn--secondary:disabled {
    background-color: lightgray;
    cursor: default;
}

.wp-btn--alternate {
    color: #fff;
    background-color: #db5e33;
}

.wp-btn--alternate:hover {
    background-color: #bc4d26;
}

.wp-btn--alternate:disabled {
    background-color: lightgray;
    cursor: default;
}

.wp-btn--escape {
    color: #fff;
    background-color: #959ea7;
}

.wp-btn--escape:hover {
    background-color: #737c85;
}

.wp-btn--accept {
    color: #fff;
    background-color: #6c1a91;
}

.wp-btn--accept:hover {
    background-color: #501c70;
}

.wp-btn-add-tab {
    border: none;
    background-color: transparent;
    font-weight: 400;
}

.wp-btn-add-tab:hover {
    background-color: #505050;
    color: white;
    cursor: pointer;
}

.wp-btn-add {
    background-color: #aaaaaa;
    background-image: plusIconUrl;
    background-repeat: no-repeat;
    background-position-x: -1px;
    background-position-y: -1px;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-size: 18px;
}
.wp-btn-add:hover {
    background-color: literal("var(--create--color)");
}

.wp-btn-add:focus {
    background-color: literal("var(--create--color)");
    outline-offset: 0;
}

.wp-btn-delete {
    background-color: #aaaaaa;
    background-image: crossIconUrl;
    background-repeat: no-repeat;
    background-position-x: -1px;
    background-position-y: -1px;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.wp-btn-delete:hover {
    background-color: literal("var(--delete--color)");
}

.wp-btn-delete:focus {
    background-color: literal("var(--delete--color)");
    outline-offset: 0;
}

.wp-btn-delete:disabled {
    background-color: #dddddd;
    cursor: default;
}

.wp-topbar__btn {
    border: none;
    line-height: 18px;
    cursor: pointer;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 400;
    background-color: transparent;
    color: inherit;
}

.wp-topbar__btn:hover {
    color: literal("var(--btn--hover--color)");
}

.wp-btn-up {
    background-color: #aaaaaa;
    background-image: upArrowIconUrl;
    background-repeat: no-repeat;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-size: 18px;
}

.wp-btn-up:hover {
    background-color: #0300d8;
}

.wp-btn-up:disabled {
    background-color: #a0a0a0;
    opacity: 0.3;
}


.wp-btn-down {
    background-color: #aaaaaa;
    background-image: downArrowIconUrl;
    background-repeat: no-repeat;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-size: 18px;
}

.wp-btn-down:hover {
    background-color: #0300d8;
}

.wp-btn-down:disabled {
    background-color: #a0a0a0;
    opacity: 0.3;
}

.wp-btn-g {
    transition: background-color 0.15s ease-in-out;
    -moz-transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;

    background-color: literal("var(--primary--color)");
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-origin: border-box;
    width: 40px;
    height: 24px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.wp-btn-g:hover {
    background-color: literal("var(--btn--hover--color)");
    outline: 1px solid #505050 !important;
}

.wp-btn-g--create:hover {
    background-color: literal("var(--create--color)");
}

.wp-btn-g--delete:hover {
    background-color: literal("var(--delete--color)");
}

.wp-btn-g:disabled {
    background-color: #a0a0a0;
    opacity: 0.3;
}

.wp-btn-g--sync-selection {
    mask-image:  syncSelectionIconUrl;
    -webkit-mask-image:  syncSelectionIconUrl;
}

.wp-btn-g--move-to-parent {
    mask-image: moveToParentIconUrl;
    -webkit-mask-image:  moveToParentIconUrl;
}

.wp-btn-g--move-to-sibling {
    mask-image:      moveToSiblingIconUrl;
    -webkit-mask-image:      moveToSiblingIconUrl;
}

.wp-btn-g--move-to-child {
    mask-image:  moveToChildIconUrl;
    -webkit-mask-image:  moveToChildIconUrl;
}

.wp-btn-g--show-hierarchy {
    mask-image:  hierarchyIconUrl;
    -webkit-mask-image:  hierarchyIconUrl;
}

.wp-btn-g--search {
    mask-image:  searchIconUrl;
    -webkit-mask-image:  searchIconUrl;
}

.wp-btn-g--create-class {
    mask-image: createIconUrl;
    -webkit-mask-image: createIconUrl;
}

.wp-btn-g--delete-class {
    mask-image: deleteIconUrl;
    -webkit-mask-image: deleteIconUrl;
}

.wp-btn-g--create-individual {
    mask-image: createIndividualIconUrl;
    -webkit-mask-image: createIndividualIconUrl;
}

.wp-btn-g--delete-individual {
    mask-image: deleteIndividualIconUrl;
    -webkit-mask-image: deleteIndividualIconUrl;
}

.wp-btn-g--create-property {
    mask-image: createPropertyIconUrl;
    -webkit-mask-image: createPropertyIconUrl;
}

.wp-btn-g--delete-property {
    mask-image: deletePropertyIconUrl;
    -webkit-mask-image: deletePropertyIconUrl;
}

.wp-btn-g--refresh {
    mask-image: refreshIconUrl;
    -webkit-mask-image: refreshIconUrl;
}

.wp-btn-g--create-thread {
    mask-image: createThreadIconUrl;
    -webkit-mask-image: createThreadIconUrl;
}

.wp-btn-g--editor {
    mask-image: editorIconUrl;
    -webkit-mask-image: editorIconUrl;
}

.wp-btn-g--changes {
    mask-image: changesIconUrl;
    -webkit-mask-image: changesIconUrl;
}

.wp-btn-g--container {
    display: flex;
    border-radius: 2px;
}

.wp-btn-g--container:hover {
    background-color: literal("var(--view-toolbar--hover--background-color)");
}

.wp-btn-g--viz {
    mask-image: vizIconUrl;
    -webkit-mask-image: vizIconUrl;
}

.wp-btn-g--download {
    mask-image: downloadIconUrl;
    -webkit-mask-image: downloadIconUrl;

}